<template>
  <div class="container">
    <!-- 卡片区域 -->
    <el-card class="box-card">
      <el-row>
        <el-col>
          <el-button
            icon="el-icon-edit"
            type="success"
            class="addQuestion"
            style="margin-right: 14px"
            @click="$router.push('new')"
            >新增试题</el-button
          >
        </el-col>
      </el-row>
      <!-- 表单区域 -->
      <el-form ref="form" label-width="80px" class="questionForm" size="small">
        <el-row>
          <el-col :span="6">
            <el-form-item label="学科">
              <el-select
                @change="changeSubject"
                style="width: 96%"
                v-model="questionParams.subjectID"
              >
                <el-option
                  v-for="item in subjectOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="二级目录">
              <el-select style="width: 96%" v-model="questionParams.catalogID">
                <el-option
                  v-for="item in directoryOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="标签">
              <el-select style="width: 96%" v-model="questionParams.tags">
                <el-option
                  v-for="item in tagsOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="关键字">
              <el-input
                style="width: 96%"
                v-model="questionParams.keyword"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="试题类型">
              <el-select
                style="width: 96%"
                v-model="questionParams.questionType"
              >
                <el-option
                  v-for="item in questionType"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="难度">
              <el-select style="width: 96%" v-model="questionParams.difficulty">
                <el-option
                  v-for="item in difficulty"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="方向">
              <el-select style="width: 96%" v-model="questionParams.direction">
                <el-option
                  v-for="item in direction"
                  :key="item"
                  :label="item"
                  :value="item"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="录入人">
              <el-select style="width: 96%" v-model="questionParams.creatorID">
                <el-option
                  v-for="item in creatorOptions"
                  :key="item.id"
                  :label="item.username"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="题目备注">
              <el-input
                style="width: 96%"
                v-model="questionParams.remarks"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="企业简称">
              <el-input
                style="width: 96%"
                v-model="questionParams.shortName"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="城市">
              <!-- 城市 -->
              <el-select
                style="width: 45%; margin-right: 3%"
                v-model="questionParams.province"
                @change="handleCity"
              >
                <el-option
                  v-for="item in cityOptions"
                  :key="item"
                  :label="item"
                  :value="item"
                >
                </el-option>
              </el-select>
              <!-- 地区 -->
              <el-select style="width: 48%" v-model="questionParams.city">
                <el-option
                  v-for="item in areaOptions"
                  :key="item"
                  :label="item"
                  :value="item"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item style="text-align: right">
              <el-button @click="clear()">清除</el-button>
              <el-button
                type="primary"
                style="margin-right: 4%"
                @click="searchInfo()"
                >搜索</el-button
              >
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <!-- tab切换 -->
      <el-tabs
        v-model="questionParams.chkState"
        type="card"
        @tab-click="changeTab"
      >
        <el-tab-pane label="全部" name="all"></el-tab-pane>
        <el-tab-pane label="待审核" name="0"></el-tab-pane>
        <el-tab-pane label="已审核" name="1"></el-tab-pane>
        <el-tab-pane label="已拒绝" name="2"></el-tab-pane>
      </el-tabs>
      <!-- 数据记录 -->
      <el-alert
        :title="`数据一共 ${total} 条`"
        style="margin-bottom: 15px"
        type="info"
        class="alert"
        :closable="false"
        show-icon
      ></el-alert>
      <!-- 表格区域 -->
      <template>
        <el-table :data="choiceList" style="width: 100%" header-align="center">
          <!-- 试题编号 -->
          <el-table-column
            prop="number"
            label="试题编号"
            width="120"
            align="center"
          >
          </el-table-column>
          <!-- 学科 -->
          <el-table-column
            prop="subject"
            label="学科"
            width="120"
            align="center"
          >
          </el-table-column>
          <!-- 目录 -->
          <el-table-column
            prop="catalog"
            label="目录"
            width="120"
            align="center"
          >
          </el-table-column>
          <!-- 题型 -->
          <el-table-column label="题型" width="120" align="center">
            <template slot-scope="scope">
              <div v-if="scope.row.questionType == '1'">单选</div>
              <div v-else-if="scope.row.questionType == '2'">多选</div>
              <div v-else>简答</div>
            </template>
          </el-table-column>
          <!-- 题干 -->
          <el-table-column label="题干" width="280" align="center">
            <template slot-scope="scope">
              <div v-html="scope.row.question"></div>
            </template>
          </el-table-column>
          <!-- 录入时间 -->
          <el-table-column label="录入时间" width="180" align="center">
            <template slot-scope="scope">
              {{ scope.row.addDate | parseTimeByString }}
            </template>
          </el-table-column>
          <!-- 难度 -->
          <el-table-column label="难度" width="120" align="center">
            <template slot-scope="scope">
              <div v-if="scope.row.difficulty == '1'">简单</div>
              <div v-else-if="scope.row.difficulty == '2'">一般</div>
              <div v-else>困难</div>
            </template>
          </el-table-column>
          <!-- 录入人 -->
          <el-table-column
            prop="creator"
            label="录入人"
            width="120"
            align="center"
          >
          </el-table-column>
          <!-- 审核状态 -->

          <el-table-column
            prop="chkState"
            label="审核状态"
            width="120"
            align="center"
          >
            <template slot-scope="scope">
              <div v-if="scope.row.chkState === 0">待审核</div>
              <div v-else-if="scope.row.chkState === 1">已审核</div>
              <div v-else-if="scope.row.chkState === 2">已拒绝</div>
            </template>
          </el-table-column>
          <!-- 审核意见 -->
          <el-table-column
            prop="chkRemarks"
            label="审核意见"
            width="150"
            align="center"
          >
          </el-table-column>
          <!-- 审核人 -->
          <el-table-column
            prop="chkUser"
            label="审核人"
            width="120"
            align="center"
          >
          </el-table-column>
          <!-- 发布状态 -->
          <el-table-column
            prop="publishState"
            label="发布状态"
            width="150"
            align="center"
          >
            <template slot-scope="scope">
              <div v-if="scope.row.publishState === 0">已下架</div>
              <div v-else-if="scope.row.publishState === 1">已上架</div>
            </template>
          </el-table-column>
          <!-- 操作 -->
          <el-table-column
            fixed="right"
            label="操作"
            width="300"
            align="center"
          >
            <template slot-scope="scope">
              <el-button type="text" @click="openPreviewDialog(scope.row)"
                >预览</el-button
              >
              <el-button
                type="text"
                @click="openCheckDialog(scope.row)"
                :disabled="scope.row.chkState !== 0"
                >审核</el-button
              >
              <el-button
                type="text"
                @click="$router.push(`new?id=${scope.row.id}`)"
                >修改</el-button
              >
              <el-button type="text" @click="setPublish(scope.row)">{{
                scope.row.publishState === 1 ? "下架" : "上架"
              }}</el-button>
              <el-button
                type="text"
                @click="delQuestion(scope.row)"
                :disabled="scope.row.publishState === 1"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </template>
      <!-- 分页区域 -->
      <el-pagination
        background
        style="margin-top: 20px; text-align: right"
        layout="prev, pager, next, sizes, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :total="total"
        :page-size="questionParams.pagesize"
        :current-page="questionParams.page"
        :page-sizes="[5, 10, 15, 20]"
      >
      </el-pagination>
    </el-card>
    <!-- 预览 -->
    <questions-preview
      ref="questionPreview"
      :data="questionInfo"
    ></questions-preview>
    <!-- 审核 -->
    <questions-check
      ref="questionCheck"
      :data="questionInfo"
      @updateList="getChoicelist()"
    ></questions-check>
  </div>
</template>

<script>
import { choice } from "@/api/hmmm/questions.js"; // 获取数据
import { remove } from "@/api/hmmm/questions.js"; // 删除
import { simple as subjectList } from "@/api/hmmm/subjects.js"; // 学科简单列表
import { simple as directoryList } from "@/api/hmmm/directorys"; // 目录简单列表
import { questionType, difficulty, direction } from "@/api/hmmm/constants.js"; // 题型 难度 方向
import { simple as userList } from "@/api/base/users.js"; // 录入人简单列表
import { simple as tagList } from "@/api/hmmm/tags"; // 标签简单列表
import { provinces as getCity, citys as getArea } from "@/api/hmmm/citys"; // 城市选择器
import { choicePublish } from "@/api/hmmm/questions.js";
import QuestionsPreview from "../components/questions-previewk"; // 预览的dialog
import QuestionsCheck from "../components/questions-check"; // 审核的dialog
import parseTimeByString from "@/filters/index"; // 时间过滤器
export default {
  // 组件
  components: {
    QuestionsPreview,
    QuestionsCheck,
  },
  // 数据
  data() {
    return {
      questionInfo: {},
      questionType, //题型
      difficulty, // 难度
      direction, //方向
      choiceList: [], // 列表数据
      total: 0, //总条数
      // 表单参数
      questionParams: {
        subjectID: null,
        difficulty: null,
        questionType: null,
        tags: null,
        province: null,
        city: null,
        keyword: null,
        remarks: null,
        shortName: null,
        direction: null,
        creatorID: null,
        catalogID: null,
        page: 1,
        pagesize: 5,
        chkState: "all",
      },
      // 学科下拉选择
      subjectOptions: [],
      // 目录
      directoryOptions: [],
      // 标签下拉选择
      tagsOptions: [],
      // 试题类型下拉选择
      questionTypeOptions: questionType,
      // 试题难度下拉选择
      difficultyOptions: difficulty,
      // 方向下拉选择
      directionOptions: direction,
      // 录入人下拉选择
      creatorOptions: [],
      // 城市下拉选择
      cityOptions: getCity(),
      // 地区 当选择了城市的时候赋值
      areaOptions: [],
    };
  },
  async created() {
    this.getChoicelist();
    // 学科下拉选项
    const { data: subjectArr } = await subjectList();
    this.subjectOptions = subjectArr;
    // 录入人下拉选择
    const { data: creatorArr } = await userList();
    this.creatorOptions = creatorArr;
  },
  methods: {
    // 获取列表数据
    async getChoicelist() {
      const params = { ...this.questionParams };
      if (params.chkState === "all") params.chkState = null;
      const { data: questionsData } = await choice(params);
      this.choiceList = questionsData.items;
      console.log(this.choiceList);

      this.total = questionsData.counts;
    },
    // 重置
    clear() {
      this.directoryOptions = [];
      this.tagsOptions = [];
      for (const res in this.questionParams) {
        if (res !== "page" && res !== "pagesize") {
          this.questionParams[res] = null;
        }
      }
      this.getChoicelist();
    },
    // 搜索筛选
    searchInfo() {
      this.questionParams.page = 1;
      this.getChoicelist();
    },
    // 分页功能
    handleSizeChange(val) {
      this.questionParams.pagesize = val;
      this.getChoicelist();
    },
    // 分页功能
    handleCurrentChange(val) {
      this.questionParams.page = val;
      this.getChoicelist();
    },
    // 选择学科之后对应显示相应的二级目录和标签选择器
    async changeSubject(subjectID) {
      this.questionParams.catalogID = null;
      this.questionParams.tags = null;
      if (subjectID) {
        // 获取目录
        const { data: directoryArr } = await directoryList({ subjectID });
        // console.log(directoryArr);
        this.directoryOptions = directoryArr;
        // 标签下拉选项
        const { data: tagArr } = await tagList({ subjectID });
        this.tagsOptions = tagArr;
      } else {
        this.directoryOptions = [];
        this.tagsOptions = [];
      }
    },
    // 城市下拉选择
    handleCity(cityName) {
      // 地区选中的数据清空
      this.questionParams.city = null;
      // 获取城市下的地区赋值给areaOptions
      this.areaOptions = getArea(cityName);
    },
    // 切换tab
    changeTab() {
      this.questionParams.page = 1;
      this.getChoicelist();
    },
    // 审核
    openCheckDialog(questionInfo) {
      this.questionInfo = questionInfo;
      this.$nextTick(() => {
        this.$refs.questionCheck.open();
      });
    },
    // 预览
    openPreviewDialog(questionInfo) {
      this.questionInfo = questionInfo;
      this.$nextTick(() => {
        this.$refs.questionPreview.open();
      });
    },
    // 上架 下架
    async setPublish(row) {
      // console.log(row.id);
      try {
        await this.$confirm(
          `您确认要${row.publishState === 0 ? "上架" : "下架"}吗？`,
          "提示",
          {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          }
        );
        row.publishState = row.publishState === 1 ? 0 : 1;
        await choicePublish(row);
        this.$message.success(
          `${row.publishState === 1 ? "上架" : "下架"}成功`
        );
        this.getChoicelist();
      } catch (error) {
        this.$message.error(
          `取消${row.publishState === 0 ? "上架" : "下架"}！`
        );
      }
    },
    // 删除
    async delQuestion(row) {
      // 不用try catch虽然可以运行 但会报出错误
      // console.log(row.id);
      try {
        await this.$confirm("此操作将永久删除该题目, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        });
        await remove(row);
        this.$message.success("删除成功！");
        this.getChoicelist();
      } catch (error) {
        this.$message.error("删除失败！");
      }
    },
  },
};
</script>

<style scoped lang='less'>
.container {
  .box-card {
    margin: 10px 7px 15px 7px;

    .addQuestion {
      float: right;
      margin-bottom: 15px;
    }

    .el-alert {
      margin-bottom: 10px;
    }
  }
}
</style>
